{% extends 'base.html' %}
{% load myfilter %}
{% block title %}
    <title>首页</title>
{% endblock %}

{% block css %}
<style>
    .collect {
        display: block;
        width: 18px;
        height: 18px;
        float: right;
        margin-right: 20px;
        background-position: center;
    }
</style>
{% endblock %}

{% block body %}
<!--    <p>{{ cs }}</p>-->
<!--    {% for b in cs %}-->
<!--        {{ b }}-{{ forloop.first }}-->
<!--    {% endfor %}-->


    <h1>这里是<<{{ book.title }}>>的详情页</h1>
<ul class="list-group">
    <li class="list-group-item">
        {{ book.title }}
        {% if request.user.is_authenticated and book|has_collected:request.user %}
        <span class="collect" style="background-image: url('/static/img/collected.png');"></span>
        {% else %}
        <span class="collect" style="background-image: url('/static/img/collect.png');"></span>
        {% endif %}
    {% csrf_token %}
    </li>
    <li class="list-group-item">
        {{ book.pub_date }}  
    </li>
    <li class="list-group-item">
        {{ book.category.title }}
    </li>

</ul>
{% endblock %}

{% block js %}
<script>
 $(function(){
    $('.collect').click(function(){
    console.log("{{ request.user.id }}")
    if ("{{ request.user.id }}"=="None"){
        location.href="/user/login?next=/detail/{{ book.id }}"
        return
    }


        $.ajax({
            url:"/operate/change_collect/",
            method:"POST",
            data:{
                "csrfmiddlewaretoken" : $("[type='hidden']").val(),
                "book_id":"{{ book.id }}"
            },
            success:function(data){
                if(data.data.state){
                    $(".collect").css({
                        "background-image": "url('/static/img/collected.png')"
                    })
                }
                else{
                    $(".collect").css({
                        "background-image":"url('/static/img/collect.png')"
                    })
                }
            }
        });
    })
 })
</script>
{% endblock %}